<template>
    <div class="root-page-container">
      <div class="mhy-main-page mhy-account-center">
        <div class="mhy-layout">
          

          <!--左侧菜单栏-->
          <div class="mhy-container mhy-side-menu mhy-account-center__menu">
            <header class="mhy-side-menu__header">个人中心</header>
            <ul class="mhy-side-menu__list">
             
            </ul>
          </div>

          <!-- 右侧内容-->
          <div class="mhy-container mhy-account-center-content">
            <router-view></router-view>
          </div>

        </div>

      </div>
    </div>
</template>

<script>
import {formatTimeToYMD} from "../../../utils/timeUtil";
import {listLoginLog} from "../../../api/log/loginLog/LoginLog";
import {resultCheck} from "../../../utils/result";

export default {
  data() {
    return {
      logList: [],
      loading: false,
      deleteList: [],
      total: 0,
      time: [],
      searchCondition: {
        current: 1,
        size: 8,
        nickname: "",
        ipSource: "",
        status: null,
        beginTime: "",
        endTime: ""
      },
      status: [
        {value: 1, label: "成功"},
        {value: 0, label: "失败"}
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    //=======================  查询操作  ===========================
    initData() {
      this.loading = true;
      listLoginLog(this.searchCondition).then(res => {
        var data = resultCheck(res, false);
        this.logList = data.data;
        this.total = data.total;
        this.loading = false;
      });
    },
    sizeChange(val) {
      this.searchCondition.size = val;
      this.initData();
    },
    currentChange(val) {
      this.searchCondition.current = val;
      this.initData();
    },
    // 时间变换
    change() {
      this.searchCondition.beginTime = formatTimeToYMD(this.time[0]);
      this.searchCondition.endTime = formatTimeToYMD(this.time[1]);
    },
    // 批量删除
    selectionChange(val) {
      this.deleteList = val;
    },

  }
}
</script>

<style scoped>
.root-page-container {
    background: url(https://www.miyoushe.com/_nuxt/img/background.cd0a312.png) no-repeat 0 62px;
    background-size: 100%;
  }
  .mhy-main-page {
    padding-top: 30px;
    position: relative;
  }
  .mhy-layout {
    width: 1000px;
    margin: 0 auto;
    padding-left: 100px;
    padding-right: 100px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
   .mhy-layout {
     zoom: 1;
   }
  .mhy-account-center-header {
    padding: 20px 50px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
  }
   .mhy-container {
     background-color: #fff;
     border-radius: 4px;
   }
  .mhy-account-center-header__avatar {
    margin-right: 24px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
   .mhy-avatar__xxl {
     width: 120px;
     height: 120px;
   }
   .mhy-avatar {
     display: inline-block;
     position: relative;
   }
  .mhy-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    vertical-align: top;
  }
   .mhy-avatar__img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 1px solid #ebebeb;
     vertical-align: top;
   }
   img {
     border-style: none;
   }
  .mhy-account-center-user {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 100%;
  }
  .mhy-account-center-user__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .mhy-account-center-user__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mhy-account-center-user__name {
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
  }
  .mhy-account-center-user__level.mhy-img-icon {
    margin-left: 10px;
    height: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
   .mhy-account-center-user__level--self {
     cursor: pointer;
   }
   .mhy-img-icon {
     height: 1em;
     fill: currentColor;
     overflow: hidden;
   }
  .mhy-account-center-header__buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .mhy-button.mhy-button-md.mhy-button-outlined {
    line-height: 32px;
  }
   .mhy-button.mhy-button-md {
     width: 86px;
     height: 34px;
     line-height: 34px;
   }
   .mhy-button {
     display: inline-block;
     cursor: pointer;
     -ms-flex-negative: 0;
     flex-shrink: 0;
   }
  .mhy-button-outlined .mhy-button__button {
    background-color: #fff;
    color: #00b2ff;
    border: 1px solid #00c3ff;
    border-radius: 4px;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: border-color,color;
    -o-transition-property: border-color,color;
    transition-property: border-color,color;
  }
   .mhy-button__button {
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     cursor: pointer;
     outline: none;
     font-size: inherit;
     color: inherit;
     width: 100%;
     height: 100%;
     background-color: transparent;
     border: none;
     border-radius: 0;
     font-weight: inherit;
     line-height: inherit;
   }
  input, button, textarea {
    color: inherit;
    font: inherit;
  }
  .mhy-account-center-user__audit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mhy-account-center-user__uid {
    font-size: 12px;
    color: #ccc;
  }
  a {
    text-decoration: none;
  }
  .mhy-account-center-user__certification, .mhy-account-center-user__intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px;
    color: #666;
    line-height: 18px;
  }
  .mhy-account-center-user__certification span, .mhy-account-center-user__intro span {
    margin-top: 2px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    line-height: 1;
  }
  p {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
  }
  .mhy-account-center-user__certification, .mhy-account-center-user__intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px;
    color: #666;
    line-height: 18px;
  }
  .mhy-account-center-user__certification .ip-icon, .mhy-account-center-user__intro .ip-icon {
    color: #76bfe3;
    font-size: 16px;
    margin-right: 8px;
  }
   .mhy-icon {
     font-size: inherit;
   }
   .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
  .icon-ip:before {
    content: "";
  }
  .mhy-account-center-header__data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 19px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: center;
    align-self: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 20px;
    border-top: 1px solid #f0f0f0;
  }
  .mhy-account-center-header__data-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 40px;
  }
  .mhy-account-center-header__data-link {
    cursor: pointer;
  }
   .mhy-account-center-header__data-num {
     color: #333;
     font-size: 20px;
   }
  .mhy-account-center-header__data-label {
    margin-left: 10px;
    color: #ccc;
  }
  .mhy-account-center-header__data-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 40px;
  }
  .mhy-account-center-header__data-link {
    cursor: pointer;
  }
   .mhy-account-center-header__data-num {
     color: #333;
     font-size: 20px;
   }
  .mhy-account-center-header__data-label {
    margin-left: 10px;
    color: #ccc;
  }
  .mhy-account-center-header__data-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 40px;
  }
  .mhy-account-center-header__data-num {
    color: #333;
    font-size: 20px;
  }
  .mhy-account-center-header__data-label {
    margin-left: 10px;
    color: #ccc;
  }

  /*左侧菜单栏*/
  .mhy-side-menu {
    width: 280px;
    float: left;
  }
   .mhy-container {
     background-color: #fff;
     border-radius: 4px;
   }
  .mhy-side-menu__header {
    width: 100%;
    padding: 0 30px;
    line-height: 50px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
  }
  .mhy-side-menu__list {
    padding: 0 30px 10px;
  }
  ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul, li {
    list-style: none;
  }
  .mhy-account-center__menu li:nth-of-type(3), .mhy-account-center__menu li:nth-of-type(5) {
    border-bottom: 1px solid #f0f0f0;
  }
  .mhy-side-menu .nuxt-link-active {
    color: #00c3ff;
  }
   .mhy-side-menu__item {
     padding: 0 20px;
     line-height: 50px;
     font-size: 14px;
     color: #666;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     cursor: pointer;
   }
  .mhy-side-menu .nuxt-link-active .mhy-icon {
    color: #00c3ff;
  }
   .mhy-side-menu__item .mhy-icon {
     width: 18px;
     font-size: 18px;
     vertical-align: top;
     display: inline-block;
     color: #d9d9d9;
     margin-right: 15px;
   }
  .mhy-icon {
    font-size: inherit;
  }
   .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
  .icon-wodefatie:before {
    content: "";
  }

  /*右侧内容*/
  .mhy-account-center-content {
    width: 700px;
    float: right;
  }
</style>